<template>
	<movable-area class="movableArea" :style="{top: top}" @tap.stop.prevent="lookOver(isBuy)">
		<movable-view class="movableView" :x="x" :y="y" :direction="direction" :damping="damping" @change="onChange"
			@touchend="onTouchend" inertia :friction="12">
			<view class="free-purchase">
				<view class="left">
					<text style="font-size: 32rpx;">¥</text>
					<text style="margin-left: 10rpx;">10</text>
				</view>
				<view class="middle">
					<view class="middle-1">您有10元优惠券待领取</view>
					<view class="middle-2">距活动截止 <text class="count"
							style="color: #FF4E04;margin-left: 10rpx;">{{freePurchase}}</text></view>
				</view>
				<view class="look-btn">立即查看</view>
			</view>
		</movable-view>
	</movable-area>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				x: 0,
				y: 500,
				x1: 0,
				x2: 0,
				y1: 0,
				y2: 0,
				move: {
					x: 0,
					y: 0
				},
				top: '-1000rpx',
			};
		},
		props: {
			damping: {
				type: Number,
				default: 10
			},
			direction: {
				type: String,
				default: "vertical"
			},
			freePurchase: {
				type: String,
				default: "00:00:00"
			},
			isBuy: {
				type: [Number, String],
				default: 0
			},
		},
		mounted() {
			let freePurchase = uni.getStorageSync('free-purchase') ? uni.getStorageSync('free-purchase') : null;
			let movTop = uni.getStorageSync('mov-top') ? uni.getStorageSync('mov-top') : null;
			if (freePurchase && !movTop) {
				setTimeout(() => {
					this.top = '-200rpx'
				}, 1000)
				setTimeout(() => {
					this.top = '-1000rpx'
					uni.setStorageSync('mov-top', 'mov-top');
				}, 6000)
			}
		},
		methods: {
			onChange(e) {
				if (e.detail.source === "touch") {
					this.move.x = e.detail.x;
					this.move.y = e.detail.y;
				}
			},
			onTouchend() {
				this.x = this.move.x;
				this.y = this.move.y;
				setTimeout(() => {
					if (this.y < 120) {
						this.top = '-1000rpx'
						uni.setStorageSync('mov-top', 'mov-top');
					} else {
						this.y = 500
					}
					// console.log(this.y);
				}, 100)
			},
			lookOver(buy) {
				uni.navigateTo({
					url: '/page_account/advertising/advertising?isBuy=' + buy
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.movableArea {
		position: fixed;
		left: 50%;
		margin-left: -351rpx;
		width: 702rpx;
		height: 510rpx;
		pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
		z-index: 999;
		transition: top 1s;

		.movableView {
			width: 702rpx;
			height: 188rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 19rpx 0rpx rgba(158, 164, 162, 0.56);
			border-radius: 20rpx;
			pointer-events: auto; //恢复鼠标事件

			.free-purchase {
				box-sizing: border-box;
				padding: 48rpx 36rpx 46rpx 45rpx;
				height: 188rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					font-weight: 600;
					font-size: 48rpx;
					color: #FF4E04;
				}

				.middle {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.middle-1 {
						font-weight: 900;
						font-size: 32rpx;
						color: #0E0E0D;
						line-height: 45rpx;
					}

					.middle-2 {
						font-weight: 400;
						font-size: 26rpx;
						color: #0E0E0D;
						line-height: 37rpx;
					}
				}

				.look-btn {
					width: 144rpx;
					height: 58rpx;
					background: #FF4E04;
					border-radius: 20rpx;
					font-weight: 600;
					font-size: 26rpx;
					color: #FFFFFF;
					line-height: 58rpx;
					text-align: center;
				}
			}

		}
	}
</style>